<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HUAWEI MATE20</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/mate20_detail.css"/>
	</head>
	<body>
		<!--网站导航-->
		<div id="header_wrapper">
			<div class = "header content">
				<div class ="nav">
					<ul>
						<li>
							<a href="index.html">首页</a>
						</li>
						<li>
							<a href="#">华为官网</a>
						</li>
						<li>
							<a href="#">荣耀官网</a>
						</li>
						<li>
							<a href="#">花粉俱乐部</a>
						</li>
						<li>
							<a href="#">V码(优购码)</a>
						</li>
						<li>
							<a href="#">企业购</a>
						</li>
						<li>
							<a href="#">Select Region</a>
						</li>
					</ul>
					<ul>
						<li>
							<a href="#" id ="login">请登录</a><a href="register.html" id = "register">注册</a>
						</li>
						<li>
							<a href="#">我的订单</a>
						</li>
						<li class ="user_service">
							<a href="#">客户服务</a>
							<span class = "iconfont icon-xiajiantou1"></span>
							<ol class ="user_que" style ="display:none;">
								<li>
									<a href="#">帮助中心</a>
								</li>
								<li>
									<a href="#">联系客服</a>
								</li>
							</ol>
							
						</li>
						<li>
							<a href="#">网站导航</a>
							<span class = "iconfont icon-xiajiantou1"></span>
						</li>
						<li>
							<a href="#">手机版</a>
							<span class = "iconfont icon-xiajiantou1 sj"></span>
						</li>
						<li>
							<a href="#">购物车(<span id ="gouwunum">0</span> )</a>
							<span class ="iconfont icon-xiazai49 gouwuche"></span>
						</li>
					</ul>
				</div>
			</div>
		</div>
			<!--logo-->
		<div id="logo_wrapper">
			<div class ="logo_nav content">	
				<div class ="logo">
					<a href="#" >
						华为商城
						<img src="images/logo.png"/>
					</a>
				</div>
				<div class="nav_center">
					<ul>
						<li>
							<a href="#">
								<img src="images/zq1.png"/>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="images/zq2.png"/>
							</a>
						</li>
						<li>
							<a href="#">Mate 20系列</a>
						</li>
						<li>
							<a href="#">荣耀V20</a>
						</li>
						<li>
							<a href="#">开门红</a>
						</li>
						<li>
							<a href="#">荣耀10</a>
						</li>
					</ul>
				</div>
				<div class ="search">
					<input type="text" value="华为Mate20 X" id ="search_i"/>
					<input type="button" name="" id="" value=" " />
					<span class= "iconfont icon-sousuo"></span>
				</div>
			</div>
		</div>
		<div id ="detail_wrapper">	
			<div class="mate_detail content">
				<div class="mate_title"><a href="index.html">首页&nbsp;</a> ><a href="#">&nbsp;手机</a> ><a href="#">&nbsp;HUAWEI Mate系列</a> >&nbsp;HUAWEI Mate 20 6GB+128GB 全网通版（宝石蓝）</div>
				<div class ="mate20">
					<div id ="mate_box">
						<div class="mate_small">
							<img src="images/mateBig.png" class="current_img"/><!--小图-->
							<div class="mask">				
							</div>
						</div>
						<div class="mate_big" style="z-index:9;">
							<img src="images/mateBig.png" class ="bigImg"/><!--大图-->
						</div>
					</div>
					<div class="mate_s_img">
						<span class ="s_img">
							<img src="images/mateBig.png" class ="small_current"/>
						</span>
						<span class ="s_img">
							<img src="images/mate20.png"  class ="small_current"/>
						</span>
						<span class ="s_img">
							<img src="images/mate20_f.png"  class ="small_current"/>
						</span>
						<span class ="s_img">
							<img src="images/mate20ce.png" class ="small_current"/>
						</span>
						<span class ="s_img">
							<img src="images/mateping.png" class ="small_current"/>
						</span>
					</div>
				</div>
				<div class="mate_select">
					<h2>HUAWEI Mate 20 6GB+64GB 全网通版（亮黑色）</h2>
					<div class="jiesshao">
						<a href="#">【老用户购机尊享一年官方碎屏险】华为感恩季，购机即赠小天鹅蓝牙音箱，享6期免息，老用户专属购机通道点击购买>>>></a>&nbsp;
						<span>麒麟980新一代人工智能芯片，6.53英寸珍珠屏，超高屏占比，超微距影像，超大广角徕卡三摄旗舰手机</span>
					</div>
					<div>
						<div class="price">
							<span>价格</span><span>￥3999</span>
						</div>
					</div>
					<div>
						<span>商品编号</span><span class ="mate_code">2601010066901</span>
					</div>
					<div>
						<span>	已选择商品：</span><span>亮黑色 / 全网通 6GB+64GB / 官方标配 / 单品  / 单品</span>
					</div>
					<div>
						<div class="num_show">
							<input type="text" name="active_num"" id="active_num" value="1" />
							<p>
								<input type="button" value="+"></input>
								<input type="button" value="-"></input>
							</p>
						</div>
						<div class="cart">
							<a href="">
								<span id="add_cart">加入购物车</span>
							</a>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		<div id ="footer_wrapper">
			<div class ="link content">
				<div class ="link_l">
					<ul>
						<li>购物相关</li>
						<li>
							<a href="#">配送方式</a>
						</li>
						<li>
							<a href="#">支付方式</a>
						</li>
						<li>
							<a href="#">常见问题</a>
						</li>
						<li>
							<a href="#">购物指南</a>
						</li>
					</ul>
					<ul>
						<li>购物相关</li>
						<li>
							<a href="#">配送方式</a>
						</li>
						<li>
							<a href="#">支付方式</a>
						</li>
						<li>
							<a href="#">常见问题</a>
						</li>
						<li>
							<a href="#">购物指南</a>
						</li>
					</ul>
					<ul>
						<li>购物相关</li>
						<li>
							<a href="#">配送方式</a>
						</li>
						<li>
							<a href="#">支付方式</a>
						</li>
						<li>
							<a href="#">常见问题</a>
						</li>
						<li>
							<a href="#">购物指南</a>
						</li>
					</ul>
					<ul>
						<li>购物相关</li>
						<li>
							<a href="#">配送方式</a>
						</li>
						<li>
							<a href="#">支付方式</a>
						</li>
						<li>
							<a href="#">常见问题</a>
						</li>
						<li>
							<a href="#">购物指南</a>
						</li>
					</ul>
					<ul>
						<li>购物相关</li>
						<li>
							<a href="#">配送方式</a>
						</li>
						<li>
							<a href="#">支付方式</a>
						</li>
						<li>
							<a href="#">常见问题</a>
						</li>
						<li>
							<a href="#">购物指南</a>
						</li>
					</ul>
					<ul>
						<li>购物相关</li>
						<li>
							<a href="#">配送方式</a>
						</li>
						<li>
							<a href="#">支付方式</a>
						</li>
						<li>
							<a href="#">常见问题</a>
						</li>
						<li>
							<a href="#">购物指南</a>
						</li>
					</ul>
				</div>
				<div class="link_r">
					<span>400-088-6888</span><br />
					<span>7x24小时客服热线（仅收市话费）</span>
					<a href="#">在线客服<span class ="iconfont icon-wodekefu"></span></a>
					<span>关注Vmall：
						<ul>
							<li>
								<a href="#" class="iconfont icon-weibo"></a>
							</li>
							<li>
								<a href="#" class="iconfont icon-huawei"></a>
							</li>
							<li>
								<a href="#" class="iconfont icon-weixin"></a>
							</li>
						</ul>
					</span>
				</div>
			</div>
			<div class="footer_nav content">
				<a href="#">
					<img src="images/logo_f.png" />
				</a>
				<div class="footer_link">
					<ul>
						<li>
							<a href="#">华为集团</a> |
						</li>
						<li>
							<a href="#">华为CBG官网</a> |
						</li>
						<li>
							<a href="#">荣耀官网</a> |
						</li>
						<li>
							<a href="#">花粉俱乐部</a> |
						</li>
						<li>
							<a href="#">华为应用市场</a> |
						</li>
						<li>
							<a href="#">EMUI</a> |
						</li>
						<li>
							<a href="#">华为终端云空间</a> |
						</li>
						<li>
							<a href="#">开发者联盟</a> |
						</li>
						<li>
							<a href="#">华为商城手机版</a> |
						</li>
						<li>
							<a href="#">网站地图</a>
						</li>
					</ul>
					<p>隐私声明 服务协议 COOKIES Copyright &copy;2012-2019 华为软件技术有限公司 版权所有 保留一切权利<br />
						公安备案 苏公网安备32011402010009号 | 苏ICP备17040376号-6<br />
						增值电信业务经营许可证：苏B2-20130048号| 网络文化经营许可证：苏网文[2015] 1599-026号
					</p>
				</div>
			</div>
		</div>
		<div class="fixed_menu">
			<!--<div class="menu_list">-->
				<a href="ShoppingCart.html">
					<span class="iconfont icon-xiazai49"></span>
					<span id= "num"></span>
					<i class="cart">购物车</i>
				</a>
				<a href="#">
					<span class="iconfont icon-wodekefu"></span>
					<i class ="service">在线客服</i>
				</a>
				<a href="#">
					<span class="iconfont icon-yijianfankui"></span>
					<i  class="advice">意见反馈</i>
				</a>
				<a href="#">
					<span class="iconfont icon-fanhuidingbu"></span>
					<i class ="goTop">返回顶部</i>
				</a>
			<!--</div>-->	
		</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/Magnifier.js"></script>
	<script>
		//购物车等固定栏动画
		$(".fixed_menu>a:nth-child(1)").hover(function(){
			$(".cart").show();
		},function(){
			$(".cart").hide();
		})
		$(".fixed_menu>a:nth-child(2)").hover(function(){
			$(".service").show();
		},function(){
			$(".service").hide();
		})
		$(".fixed_menu>a:nth-child(3)").hover(function(){
			$(".advice").show();
		},function(){
			$(".advice").hide();
		})
		$(".fixed_menu>a:nth-child(4)").hover(function(){
			$(".goTop").show();
		},function(){
			$(".goTop").hide();
		}).click(function(){
			$("body,html").animate({
				scrollTop:0
			},500);
		})
		$(function(){
			var phoneNum = JSON.parse(localStorage.getItem("phoneNum"));
			console.log(phoneNum);
			
			var cartJson = JSON.parse(localStorage.getItem(phoneNum+"goods"));
			console.log(cartJson);
			var cartNum = 0;
			for (var i = 0; i < cartJson.length; i++) {
				cartNum += cartJson[i].num;
			}
			console.log(cartNum);
			$("#num").html(cartNum);
			$("#gouwunum").html(cartNum);
		})
	</script>
	</body>
</html>
